import React, { CSSProperties, useEffect, useState } from 'react';
import { Zoom } from './Zoom';

export default {
  component: Zoom,
  title: 'Basics/Zoom',
  argTypes: {
    scale: {
      control: { type: 'range', min: 0.2, max: 30, step: 0.02 },
    },
  },
  parameters: {
    chromatic: { delay: 500, diffThreshold: 0.2 },
  },
};
const EXAMPLE_ELEMENT = (
  <div
    style={{
      width: 2000,
      height: 2000,
      border: '10px solid orangered',
      background: `url('')`,
    }}
  />
);

const TemplateElement = (args) => <Zoom.Element {...args} />;

export const elementActualSize = TemplateElement.bind({});

elementActualSize.args = {
  scale: 1,
  children: EXAMPLE_ELEMENT,
};

export const elementZoomedIn = TemplateElement.bind({});

elementZoomedIn.args = {
  scale: 0.7,
  children: EXAMPLE_ELEMENT,
};

export const elementZoomedOut = TemplateElement.bind({});

elementZoomedOut.args = {
  scale: 3,
  children: EXAMPLE_ELEMENT,
};

const style: CSSProperties = {
  width: '500px',
  height: '500px',
  border: '2px solid hotpink',
  position: 'relative',
};

const TemplateIFrame = (args) => {
  const iFrameRef = React.useRef<HTMLIFrameElement>(null);
  const [scale, setScale] = useState(1);
  const [loaded, hasLoaded] = useState(false);

  useEffect(() => {
    if (loaded) {
      setScale(args.scale);
    }
  }, [args.scale, loaded]);
  return (
    <Zoom.IFrame iFrameRef={iFrameRef} scale={scale} active={args.active}>
      <iframe
        id="iframe"
        title="UI Panel"
        onLoad={() => hasLoaded(true)}
        src="/iframe.html?id=ui-panel--default&viewMode=story"
        style={style}
        ref={iFrameRef}
        allowFullScreen
      />
    </Zoom.IFrame>
  );
};
export const iFrameActualSize = TemplateIFrame.bind({});

iFrameActualSize.args = {
  scale: 1,
  active: true,
};

export const iFrameZoomedIn = TemplateIFrame.bind({});

iFrameZoomedIn.args = {
  scale: 0.7,
  active: true,
};

export const iFrameZoomedOut = TemplateIFrame.bind({});

iFrameZoomedOut.args = {
  scale: 3,
  active: true,
};
